import { changeCToF, formatMinutesToTime, SegmentData } from '@/utils';
import { useProps } from '@ray-js/panel-sdk';
import { Button, Text, View } from '@ray-js/ray'; // 导入基础 UI 组件
import { Switch } from '@ray-js/smart-ui';
import React from 'react';
import styles from './index.module.less'; // 引入模块化样式
import Strings from '@/i18n';

// 图标按钮行组件
export function HeatTimeView({
  temp_unit_convert = 'c',
  hasTemperature = true,
  index,
  clickTurmTurm,
  clickTimeSecltector,
  onSwitch,
  clickWeekDayToggle,
  segmentData,
  data = []
}: {
  temp_unit_convert?: string,
  hasTemperature?: boolean,
  index: number,
  onSwitch: (group: number, child: number, on: boolean) => void,
  clickTurmTurm: (group: number, child: number) => void,
  clickTimeSecltector: (group: number, child: number) => void,
  clickWeekDayToggle: (group: number, week: number) => void,
  segmentData?: SegmentData,
  data?: SegmentData[]
}) {
 const colorSelected = '#DD3F12';
 const colorNormal = 'white';
 const colorDisable = 'gray';

  // 如果有传入的segmentData，则使用它；否则使用默认数据
  const datas = segmentData ? segmentData.groups.map((group, idx) => ({
    text: `${idx + 1}`,
    id: `${idx + 1}`,
    startTime: group.startTime,
    endTime: group.endTime,
    temperature: temp_unit_convert === 'c' ? group.temperature : changeCToF(group.temperature),
    selectionMark: segmentData.selectionMark,
    isOn: segmentData.selectionMark.charAt(7 - idx) === '1',//是否标记打开
  })) : [
  ]

  /**
   * 
   * @param day 获取当前状态下的星期文字颜色:1-7
   * @returns 
   */
  function getFontBackColor(day: number): string {
    // console.log('getFontBackColor-61', day);
    if (data == null) {//空则为正常颜色
      return colorNormal;
    }
    let currentDayState = false;//循环查询当前的日子是否已有选中的

    for (let i = 0; i < data.length; i++) {
      if (index == i) {//表示是当前我这组的数据
        if (data[i].weekDay.charAt(7 - day) === '1') {//表示选中
          // console.log('getFontBackColor-70', day);
          return colorSelected;
        }
      }
      if (data[i].weekDay.charAt(7 - day) === '1') {//表示星期一有选中的
        currentDayState = true;
      }
    }

    if (currentDayState) {//表示星期一已经有选中的
      // console.log('getFontBackColor-80', day);
      return colorDisable;
    } else {//表示星期一目前没选中的
      // console.log('getFontBackColor-83', day);
      return colorNormal;
    }
  }

  /**
   * 
   * @param day 判断自己时候可以点击
   * @returns 
   */
    function isDayCanClick(day: number): boolean {
    // console.log('isDayCanClick-61', day);
    if (data == null) {//空则为正常颜色
      return true;
    }
    let currentDayState = false;//循环查询当前的日子是否已有选中的

    for (let i = 0; i < data.length; i++) {
      if (index == i) {//表示是当前我这组的数据
        if (data[i].weekDay.charAt(7 - day) === '1') {//表示选中
          // console.log('isDayCanClick-70', day);
          return true;
        }
      }
      if (data[i].weekDay.charAt(7 - day) === '1') {//表示星期一有选中的
        currentDayState = true;
      }
    }

    if (currentDayState) {//表示星期一已经有选中的
      // console.log('isDayCanClick-80', day);
      return false;
    } else {//表示星期一目前没选中的
      // console.log('isDayCanClick-83', day);
      return true;
    }
  }

  function getFontColor(day: number): string {
    if (data == null) {//空则为正常颜色
      return 'black';
    }
    let currentDayState = false;//循环查询当前的日子是否已有选中的
    for (let i = 0; i < data.length; i++) {
      if (index == i) {//表示是当前我这组的数据
        if (data[i].weekDay.charAt(7 - day) === '1') {//表示选中
          return 'white';
        }
      }
      if (data[i].weekDay.charAt(7 - day) === '1') {//表示星期一有选中的
        currentDayState = true;
      }
    }

    if (currentDayState) {//表示星期一已经有选中的
      return 'white';
    } else {//表示星期一目前没选中的
      return 'black';
    }
  }

  return (
    <View className={styles.view} >
      <View className={styles.switchLayout} style={{ paddingBottom: '24rpx' }}>
        <Switch
          customClass={styles.switch}
          style={{ opacity: 0 }}
        />
        <View style={{ marginLeft: '20rpx', width: '50vw', display: 'flex', flexDirection: 'row' }}>
          <Text className={styles.text} style={{ flex: '1' }}>{Strings.getLang('m_start')}</Text>
          <Text className={styles.text} style={{ opacity: 0 }}>—</Text>
          <Text className={styles.text} style={{ flex: '1' }}>{Strings.getLang('m_end')}</Text>
        </View>
        {hasTemperature && (
          <Text className={styles.text} style={{ flex: 1 }}>{Strings.getLang('m_temp')}</Text>
        )}
        {/* {!hasTemperature && (
          <View style={{ width: '30px' }} />
        )} */}
      </View>
      {datas.map((item, child) => (
        <View className={styles.switchLayout} key={item.id}>
          <Switch
            customClass={styles.switch}
            checked={item.isOn}
            activeColor="#DE3F12"
            inactiveColor="#ABABAB"
            onChange={(event) => {
              console.log('switch', index, child, event.detail);
              onSwitch(index, child, event.detail)
            }}
          />
          <View hoverClassName={styles.pressed} hoverStayTime={5} onClick={() => { clickTimeSecltector(index, child) }} style={{ marginLeft: '20rpx', width: '50vw', display: 'flex', flexDirection: 'row' }}>
            <Text className={styles.text} style={{ flex: '1' }}>{formatMinutesToTime(item.startTime)}</Text>
            <Text className={styles.text}>—</Text>
            <Text className={styles.text} style={{ flex: '1' }}>{formatMinutesToTime(item.endTime)}</Text>
          </View>
          {hasTemperature && (
            <Button className={styles.text} style={{ flex: 1, backgroundColor: 'rgba(0, 0, 0, 0)' }} hoverStayTime={5} onClick={() => {
              clickTurmTurm(index, child)
            }}>{item.temperature}{temp_unit_convert === 'c' ? '℃' : '℉'}</Button>
          )}
          {/* {!hasTemperature && (
            <View style={{ width: '30px' }} />
          )} */}
        </View>
      ))}

      <Text className={styles.text} style={{ paddingLeft: '24rpx', display: 'block', textAlign: 'left' }}>{Strings.getLang('m_repeat_for')}</Text>
      <View style={{ paddingLeft: '24rpx', paddingRight: '24rpx', display: 'flex', flexDirection: 'row', alignItems: 'center', width: '100%' }}>
        <Button disabled={!isDayCanClick(1)}  onClick={() => { clickWeekDayToggle(index, 1) }} className={styles.buttontext} hoverStartTime={0} hoverStayTime={0} style={{ color: getFontColor(1), backgroundColor: getFontBackColor(1) }}>{Strings.getLang('m_mon')}</Button>
        <Button disabled={!isDayCanClick(2)}  onClick={() => { clickWeekDayToggle(index, 2) }} className={styles.buttontext} hoverStartTime={0} hoverStayTime={0} style={{ color: getFontColor(2), backgroundColor: getFontBackColor(2) }}>{Strings.getLang('m_tue')}</Button>
        <Button disabled={!isDayCanClick(3)}  onClick={() => { clickWeekDayToggle(index, 3) }} className={styles.buttontext} hoverStartTime={0} hoverStayTime={0} style={{ color: getFontColor(3), backgroundColor: getFontBackColor(3) }}>{Strings.getLang('m_wed')}</Button>
        <Button disabled={!isDayCanClick(4)}  onClick={() => { clickWeekDayToggle(index, 4) }} className={styles.buttontext} hoverStartTime={0} hoverStayTime={0} style={{ color: getFontColor(4), backgroundColor: getFontBackColor(4) }}>{Strings.getLang('m_thur')}</Button>
        <Button disabled={!isDayCanClick(5)}  onClick={() => { clickWeekDayToggle(index, 5) }} className={styles.buttontext} hoverStartTime={0} hoverStayTime={0} style={{ color: getFontColor(5), backgroundColor: getFontBackColor(5) }}>{Strings.getLang('m_fri')}</Button>
        <Button disabled={!isDayCanClick(6)}  onClick={() => { clickWeekDayToggle(index, 6) }} className={styles.buttontext} hoverStartTime={0} hoverStayTime={0} style={{ color: getFontColor(6), backgroundColor: getFontBackColor(6) }}>{Strings.getLang('m_sat')}</Button>
        <Button disabled={!isDayCanClick(7)}  onClick={() => { clickWeekDayToggle(index, 7) }} className={styles.buttontext} hoverStartTime={0} hoverStayTime={0} style={{ color: getFontColor(7), backgroundColor: getFontBackColor(7) }}>{Strings.getLang('m_sun')}</Button>
      </View>
      <View style={{ height: '60rpx' }}></View>
      {index != 3 && <View className={styles.line} />}

    </View>
  );
}

export default function HeatTimeViewGroup({
  hasTemperature = true,
  clickTurmTurm,
  clickTimeSecltector,
  onSwitch,
  clickWeekDayToggle,
  data = []
}: {
  onSwitch: (group: number, child: number, on: boolean) => void,
  hasTemperature?: boolean,
  clickTurmTurm: (group: number, child: number) => void,
  clickTimeSecltector: (group: number, child: number) => void,
  clickWeekDayToggle: (group: number, week: number) => void,
  data?: SegmentData[]
}) {

  const temp_unit_convert = useProps(props => props.temp_unit_convert);//当前温标

  return (
    <View className={styles.view}>
      {data && data.length > 0 && (
        data.map((segment, index) => (
          <HeatTimeView
            onSwitch={onSwitch}
            temp_unit_convert={temp_unit_convert}
            key={index}
            hasTemperature={hasTemperature}
            index={index}
            clickWeekDayToggle={clickWeekDayToggle}
            clickTurmTurm={clickTurmTurm}
            clickTimeSecltector={clickTimeSecltector}
            segmentData={segment}
            data={data}
          />
        ))
      )}
    </View>
  )
}